<template>
    <div>
         <div class="div1">
           <p>
                <Header1></Header1>
                <Header2></Header2>
           </p>
          
        </div>
            <!-- 子路由连接 -->
        <div class="div2">
            <div class="div3">
                <router-link to="/citylist">城市</router-link>

                <router-link to="/home/reying">热映</router-link>
                <router-link to="/home/yingyuan">影院</router-link>
                <router-link to="/home/daiying">待映</router-link>
                <router-link to="/home/jingdian">经典电影</router-link>
            </div>
              <!-- 子路由出口 -->
            <router-view></router-view>
        </div>
          
    </div>

   
</template>

<script>

import Header1 from"../../components/Header1.vue";
import Header2 from"../../components/Header2.vue";
// import Header3 from"../../components/Header3.vue";

export default {
    name:'Movie',
    data:function(){
        return{
            reyingList:[],
            haoping:"",

        };
    },
    components:{
        Header1,Header2,
    },
};
</script>

<style scoped>


p{
    position:fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 800;
    
    
}
.div2{
  margin-top: 150px;
  margin-bottom: 80px;
  z-index: 700;
}
.div3{
    position: fixed;
    z-index: 750;
    background: #fff;
    width: 100%;
    top: 2.933333rem;
    height: 1rem;
    /* border: 1px solid red; */
    display: flex;
    line-height: 1rem;
    justify-content: space-around;
    border-top: 1px solid rgba(102, 102, 102, 0.171);
    border-bottom: 1px solid rgba(102, 102, 102, 0.171);
  
}
.div3 a{
    color: #666;
}
.div3 a.router-link-exact-active {
  border-bottom: 3px solid #f03d37;
  font-size: 16px;
  font-weight: bold;
}
</style>